<template>
	<view class="body ">
		<view class="head">
			<view class="head_left"  @click="back()"><image src="/static/img/fanhui.png" mode=""></image></view>

			<view class="head_center hei_38_bold text_center">
				 注册
			</view>
			<view class="hei_30_bold head_right PingFang"></view>
		</view>
		<view class="content">
			<view class="app_content">
				<view class="login_input">
					<view class="display_flex">
						<image src="/static/img/shouj_icon.png" alt="" class="shuru_icon"></image>
						<input type="text" placeholder="手机号码" value="" v-model="shouji" class="hei_26" />
					</view>
					<view class="display_flex">
						<image src="/static/img/mima_icon.png" alt="" class="shuru_icon"></image>
						<input :type="type1" placeholder="请设置一个最少6位的密码" value="" @input="mimashu" class="hei_26" />
						<image :src="yan1_zhuangtai" mode="" @click="chakan()" :class="['yanjing', type1 == 'text' ? 'kai' : 'guan']"></image>
					</view>

					<view class="display_flex">
						<image src="/static/img/mima_icon.png" alt="" class="shuru_icon"></image>
						<input :type="type2" placeholder="请再次输入密码" value="" @input="agamimashu" name="" class="hei_26" />
						<image :src="yan2_zhuangtai" mode="" @click="chakan2()" :class="['yanjing', type2 == 'text' ? 'kai' : 'guan']"></image>
					</view>
				</view>
			
				<view class="zhuce_bottom">
					<button @click="onRegister()" class="zhuce_btn bai_30 ">立即注册</button>
					<view class="zhuce_tishi qian_24">
						已有账号？请 <text @click="go_zhuce()"class="hong_24">登录</text>
					</view>
				</view>
				<div class="login_bottom hei_28">
					<div class="login_bottom_item" @click="yijian" >
						<image src="/static/img/yijian_icon.png"></image>
						<p>一键登录</p>
					</div>
					
				</div>
			</view>
		</view>
<uni-popup id="tan_login" ref="tan_login" type="center">
<view class="tan_login">
	<view class="tan_login_box">
		<view class="tan_login_logo">
			<image :src="logo" mode=""></image>
		</view>
		<view class="hei_38_bold PingFang tan_login_shouquan">
			登录授权
		</view>
		<view class="tan_login_tishi hei_28">
			等你好久啦~
		</view>
		<view class="tan_login_bottom">
			<button type="button"  class="bai_30 "    open-type="getPhoneNumber" lang="zh_CN" @getphonenumber="bindGetPhoneNumber" scope='phoneNumber'>立即授权</button>
		</view>	
	</view>
	<view class="tan_login_close">
		<image src="/static/img/login_close.png" mode=""@click="$refs.tan_login.close()"></image>
	</view>
</view>
</uni-popup>
		
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			img_url: uni.getStorageSync('img_url'),
			is_tongyi: false,
			shouji: '',
			type: 2,
			mima: '',
			agemima: '',
			yaoqingma: '',
			yan1_zhuangtai: '/static/img/yanguan.png',
			yan2_zhuangtai: '/static/img/yanguan.png',
			type1: 'password',
			type2: 'password',
			isdisabled: false,
			isCheck:false,
			is_tongyi:false,
			my_url:'/pages/index/my'
		};
	},

	onShow() {

		
	},
	onReady() {},
	onLoad(option) {


	},
	methods: {
		back() {
			uni.navigateBack();
		},
		go_zhuce(){
			uni.redirectTo({
				url:'/pages/index/login'
			})
		},
		yijian(){
			this.$refs.tan_login.open()
		},
		mimashu(e) {
			this.mima = e.target.value;
		},
		agamimashu(e) {
			this.agemima = e.target.value;
		},
		chakan() {
			if (this.type1 == 'password') {
				this.type1 = 'text';
				this.yan1_zhuangtai = '/static/img/yankai.png';
			} else {
				this.type1 = 'password';
				this.yan1_zhuangtai = '/static/img/yanguan.png';
			}
		},
		chakan2() {
			if (this.type2 == 'password') {
				this.type2 = 'text';
				this.yan2_zhuangtai = '/static/img/yankai.png';
			} else {
				this.type2 = 'password';
				this.yan2_zhuangtai = '/static/img/yanguan.png';
			}
		},
		// 立即注册
		onRegister() {
			var that=this
			// if (!this.is_tongyi) {
			// 	uni.showToast({
			// 		title: '请阅读并同意协议',
			// 		duration: 2000,
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			if (!this.shouji) {
				uni.showToast({
					title: '请输入手机号码',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}

			if (!this.mima) {
				uni.showToast({
					title: '请输入密码',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			if (!this.agemima) {
				uni.showToast({
					title: '请再次输入密码',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			if (this.agemima!=this.mima) {
				uni.showToast({
					title: '输入密码不一致',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			
		this.$http
			.post({
				url: '/api/register',
				data: {
					username:this.shouji,
					password:this.mima
				}
			})
			.then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '注册成功',
						duration: 2000,
						icon: 'none'
					});
					uni.setStorageSync("Cookie",res.token)
					setTimeout(function(){
						uni.switchTab({
							url: '/pages/index/my'
						});
					},500)
					
					
				}
			});
			
		}
	}
};
</script>

<style>
.head {
}
.content {
}

/* 登陆注册 */
.click_on {
	background-color: #f9f9f9;
}

.huise {
	color: #666666;
}

.login_input {
	padding: 0 30rpx;
}

.login_input .display_flex {
	justify-content: flex-start;
	border-bottom: 1px solid #dfdfdf;
	padding: 30rpx 0;
	margin-top: 24rpx;
	display: flex;
	align-items: center;
}

.login_input view input {
	outline: none;
	width: 96%;
	font-size: 24rpx;
	border: none;
	outline: none;
	height: 30rpx;
}

.huoqu_yanzheng {
	width: 192rpx;
	height: 44rpx;
	border-radius: 24rpx;
	border: solid 1px #fc761f;
	font-size: 24rpx;
	background-color: #ffffff;
	color: #fc761f;
	line-height: 44rpx;
}
.yanjing {
	width: 26rpx;
	height: 20rpx;
}
.shuru_icon {
	width: 26rpx;
	height: 30rpx;
	margin-right: 24rpx;
}
.display_flex {
	align-items: center;
}

.zhuce_bottom {
	text-align: center;
	margin-top: 100rpx;
	padding: 0 30rpx;
}

.zhuce_bottom button {
	height: 88rpx;
	
	border-radius: 44rpx;
	width: 100%;
	margin-bottom: 20rpx;
	line-height: 88rpx;
}
.xieyi {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 200rpx;
}
.xieyi input {
	margin-right: 10rpx;
	width: 24rpx;
	height: 24rpx;
}

.wangji_mima {
	text-align: right;
	margin-top: 32rpx;
}
.border {
	border: solid 1px #eeeeee;
}
.head_center {
	width:400rpx;
	height: 63rpx;
	background-color: #f8f8f8;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	padding: 0 10rpx;
	box-sizing: border-box;
}
.head_center text {
	width: 361rpx;
	height: 63rpx;

	border-radius: 37rpx;
	display: inline-block;
	line-height: 63rpx;
}
.logo_type_active {
	background-color: #6a3906;
	color: #ffffff;
}
.lan_24 {
	color: #33a7ff;
}
.zhuce_tishi {
	display: flex;
	align-items: center;
	justify-content: center;
}
.kai {
	width: 29rpx !important;
	height: 19rpx !important;
}
.guan {
	width: 28rpx !important;
	height: 14rpx !important;
}
.tu_code{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #dfdfdf;
	padding: 20rpx 0;
}
.tu_code image{
	width: 280rpx;
	max-height: 84rpx;
	position: relative;
	top: 20rpx;
}
.huadong{
	width: 720rpx;
	height: 200rpx;
    background-color: #ffffff;
	box-sizing: border-box;
}
.huadong_title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eeeeee;
	height: 80rpx;
	padding: 0 10rpx ;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 20rpx;
}
.huadong_title image{
	width: 30rpx;
	height: 30rpx;
}
.login_bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 54rpx;
	/* position: fixed; */
	width: 100%;
	background-color: #ffffff;
	bottom: 60rpx;
	box-sizing: border-box;
	margin-top: 150rpx;
	padding-bottom: 30rpx;
}
.login_bottom image {
	width: 100rpx;
	height: 100rpx;
	vertical-align: bottom;
	margin-bottom: 20rpx;
}
.login_bottom_item {
	text-align: center;
	margin-right: 110rpx;
	width: 140rpx;
}
.login_bottom_item:last-child{
	margin-right: 0;
}
.text_center{
	text-align: center;
	background: none;
	justify-content: center;
}

.zhuce_btn{
	background-color: #e7246a;
}
.tan_login{
	width: 600rpx;
	text-align: center;
	box-sizing: border-box;
}

.tan_login_tishi{
	text-align: center;
	line-height: 130rpx;
}
.tan_login_bottom{
	text-align: center;
}
.tan_login_bottom button{
	width: 467rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	margin: 0 auto;
	background-color: #e7246a;
}
.tan_login_logo image{
	width: 124rpx;
	height: 124rpx;
	border: 4rpx solid #ffffff;
	margin-top: -62rpx;
	border-radius: 100%;
	vertical-align: bottom;
	margin-bottom: 30rpx;
}
.tan_login_close image{
	width: 60rpx;
	height: 60rpx;
	margin-top: 60rpx;
}
.tan_login_box{
	height: 420rpx;
	background-color: #ffffff;
	border-radius: 34rpx;
}
</style>
